<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="75px">
			<el-form-item label="用户角色:" prop="roleName">
				<el-input v-model.trim="queryParams.roleName" clearable placeholder="请输入用户角色" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="操作人员:" prop="operName">
				<el-input v-model.trim="queryParams.operName" clearable placeholder="请输入操作人员" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="系统模块:" prop="title">
				<el-input v-model.trim="queryParams.title" clearable placeholder="请输入系统模块" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="业务类型:" prop="businessType">
				<el-select v-model.trim="queryParams.businessType" clearable placeholder="请选择业务类型">
					<el-option :value="undefined" label="全部" />
					<el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="操作时间:"></start-end-time>
		</el-form>

		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button v-hasPermi="['monitor:operlog:remove']" type="primary" @click="handleClean">
				<svg-icon icon-class="qk" size="16px"></svg-icon>
				清空
			</el-button>
			<el-button v-hasPermi="['monitor:operlog:export']" type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>

		<el-table v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
			<el-table-column align="center" label="序号" type="index" width="55" />
			<el-table-column align="center" label="用户角色" prop="roleName" min-width="120" />
			<el-table-column align="center" label="操作人员" prop="operName" min-width="120" />
			<el-table-column align="center" label="系统模块" prop="title" min-width="156" />
			<el-table-column :formatter="typeFormat" align="center" label="业务类型" prop="businessType" min-width="120" />
			<el-table-column :show-overflow-tooltip="true" align="center" label="IP地址" prop="operIp" min-width="120" />
			<el-table-column :formatter="statusFormat" align="center" label="操作状态" prop="status" min-width="120" />
			<el-table-column align="center" label="操作时间" prop="operTime" width="200">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.operTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.operTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :width="80" align="center" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button v-hasPermi="['monitor:operlog:query']" type="primary" @click="handleView(scope.row, scope.index1)">详情 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 操作日志详细 -->
		<l-dialog v-model="open" :show-button="false" title="操作日志详细" width="523px" @close="open = false" @formClose="open = false">
			<el-form ref="form" :model="form" label-width="100px" disabled>
				<el-form-item label="操作人员:">
					<el-input :value="form.operName"></el-input>
				</el-form-item>
				<el-form-item label="系统模块:">
					<el-input :value="form.title"></el-input>
				</el-form-item>
				<el-form-item label="登录信息:">
					<el-input :value="form.operName"></el-input>
				</el-form-item>
				<el-form-item label="业务类型:">
					<el-input :value="typeFormat(form)"></el-input>
				</el-form-item>
				<el-form-item label="操作方法:">
					<el-input :rows="5" type="textarea" class="!w-[299px]" :value="form.method"></el-input>
				</el-form-item>
				<el-form-item label="请求参数:">
					<el-input :rows="5" type="textarea" class="!w-[299px]" :value="form.operParamName"></el-input>
				</el-form-item>
				<el-form-item label="返回参数:">
					<el-input :value="form.jsonResult"></el-input>
				</el-form-item>
				<el-form-item label="操作状态:">
					<el-input :value="form.status === 0 ? '正常' : '失败'"></el-input>
				</el-form-item>
				<el-form-item label="操作时间:">
					<el-input :value="form.operTime"></el-input>
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import { cleanOperlog, delOperlog, exportOperlog, list } from '@/api/monitor/operlog';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';

export default {
	name: 'Operlog',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 是否显示弹出层
			open: false,
			// 类型数据字典
			typeOptions: [],
			// 类型数据字典
			statusOptions: [],
			// 日期范围
			dateRange: [],
			// 表单参数
			form: {},
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				roleId: null,
				title: undefined,
				operName: undefined,
				businessType: undefined,
				status: undefined,
			},
		};
	},
	created() {
		this.getList();
		this.getDicts('sys_oper_type').then((response) => {
			this.typeOptions = response.data;
		});
		this.getDicts('sys_common_status').then((response) => {
			this.statusOptions = response.data;
		});
	},
	methods: {
		/** 查询登录日志 */
		getList() {
			this.loading = true;
			list(this.addDateRange(this.queryParams, this.dateRange))
				.then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 操作日志状态字典翻译
		statusFormat(row) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		// 操作日志类型字典翻译
		typeFormat(row) {
			return this.selectDictLabel(this.typeOptions, row.businessType);
		},
		//获取时间
		getTime(startTime, endTime) {
			this.$set(this.dateRange, 0, startTime);
			this.$set(this.dateRange, 1, endTime);
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime(); //清空时间
			this.dateRange = [];
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.operId);
			this.multiple = !selection.length;
		},
		/** 详细按钮操作 */
		handleView(row) {
			this.open = true;
			this.form = row;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const operIds = row.operId || this.ids;
			this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delOperlog(operIds);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 清空按钮操作 */
		handleClean() {
			this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return cleanOperlog();
				})
				.then(() => {
					this.getList();
					this.msgSuccess('清空成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有操作日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportOperlog(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
